<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-text="msg"></p>
        <input type="button" value="修改msg" v-on="setmsg">
    </div>
</body>
<script>
     function mount(_data={},_methods,el){
        console.log(_data);
        console.log(_methods);
        console.log(el);
        let vm={}
        let root=document.querySelector(el)

        for(let propName in _data){
            let tempEl="[v-text='"+propName+"']"
            let propNameToDoms=root.querySelectorAll(tempEl)
            Object.defineProperty(vm,propName,{
                get(){
                    return _data[propName]
                },
                set(nv){
                    _data[propName]=nv
                    propNameToDoms.forEach(element => {
                        element.textContent=_data[propName]
                    });
                }
            })
            propNameToDoms.forEach(element => {
                element.textContent = _data[propName]
            });
        }
        
        for(let funName in _methods){
            vm[funName]=_methods[funName].bind(vm)
            let eventDoms=root.querySelectorAll(`[v-on='${funName}']`)
            eventDoms.forEach(element=>{
                element.addEventListener('click',function(){
                    vm[funName]()
                })
            })
             
        }
       return vm
     }
   function createApp(options={}){
    let _data=options.data()
    let _methods=options.methods
    return{
        _data,
        _methods,
        mount:mount.bind(null,_data,_methods)
    }
   }
   const app=createApp({
    data:function(){
        return{
            msg:'aaa'
        }
    },
    methods:{
        setmsg(){
            this.msg=Math.random()
        }
    }
   })
   const vm=app.mount('#app')
</script>
</html>